var color="#000000";
document.getElementById('color').onchange = function() {
	document.getElementById('border').style.borderColor = this.value;
	document.getElementById('bk').style.backgroundColor = this.value;
	color=this.value;
};
var x1, y1, x2, y2, offleft, offtop, isclik = 0,
	isclik1 = 0,t=0,xx,yy,xx1,yy1;
$(function() {	
	var resultewidth=$("#resulte").width();
	
	$("#bk").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#bk").css('left'));
		offtop = parseInt($("#bk").css('top'));
		isclik = 1;
	});
	$("#border").click(function(e) {		
		 

	}).
	
	
	$("#border").mouseup(function() {
		t+=1;
		var str="bk"+t;
		isclik = 0;
		var w=$("#border_width").val();
		var h=$("#border_height").val();
		$("#bk").css('width',w+"px");
		$("#bk").css("height",h+"px")
		
		$("#f").clone(true).attr('id',str).appendTo($("#gg"))
		$("#"+str+">#bk").animate({left:"-=175px"},0)
		$("#f>#bk").animate({left:"+="+-(x2-x1)+"px"},0)
		$("#f>#bk").animate({top:"+="+-(y2-y1)+"px"},0)
		
		$("#bk").css('width','50px')
		
	});
	
	$("#border").mousedown(function(e) {
		x1 = e.pageX;
		y1 = e.pageY;
		offleft = parseInt($("#border").css('left'));
		offtop = parseInt($("#border").css('top'));
		isclik1 = 1;
	});
	$("#f1").mousemove(function(e) {
		if (isclik1 == 1) {
			x2 = e.pageX;
			y2 = e.pageY;
			 xx1 = x2 - x1 + offleft;
			 yy1 = y2 - y1 + offtop;
			if (xx1 >= 0 && xx1 < wmax1) {
				$("#border").css('left', xx1 + "px");
			}
			if (yy1 >= 0 && yy1 < hmax1 - 1) {
				$("#border").css('top', yy1 + "px");
			}
		}
	
	}).mouseup(function() {
		t+=1;
		var str="border"+t;
		isclik1 = 0;
		var w=$("#border1_width").val();
		var h=$("#border1_height").val();
		$("#border").css('width',w+"px");
		$("#border").css("height",h+"px")
		
		$("#border").css('width','100px')
		$("#f1").clone(true).attr('id',str).appendTo($("#gg"))
		$("#"+str+">#border").animate({left:"-=175px"},0)
		$("#f1>#border").animate({left:"+="+-(x2-x1)+"px"},0)
		$("#f1>#border").animate({top:"+="+-(y2-y1)+"px"},0)
		
		$("#border").css('width','50px')
	});
	
})



// box1.onmousedown = function(e) {
// 	var y = $(this).offset().top;
// 	var x = $(this).offset().left;
// 	console.log("y="+y)
// 	console.log("x="+x)
// 	document.onmousemove = function(e) {
// 		// console.log("触发了鼠标移动事件事件");
// 		// var left = $("#f").offset().left;
// 		// var top = $("#f").offset().top;
// 		// var left1 = $("#bk").offset().left;
// 		// var top1 = $("#bk").offset().top;
// 		// console.log("left1=" + left1)
// 		// console.log(left)
// 		// console.log("top1=" + top1)
// 		// console.log(top)
// 		var evt = e || event;
// 		// console.log(e);
// 		//获取鼠标的位置
// 		var left2 = evt.clientX;
// 		var top2= evt.clientY;
// 		console.log(left2,top2);

// 		box1.style.left = evt.clientX-x + "px";
// 		box1.style.top = evt.clientY-y+  + "px";
// 		// console.log("box1的位置为：" + box1.style.left + "," + box1.style.top);
// 	};
// 	//为元素绑定一个鼠标松开事件：当松开时，元素固定在当前位置（取消document的onmousemove事件）
// 	box1.onmouseup = function() {
// 		document.onmousemove = null;
// 	};

// };
